<template>
    <div class="login-container">
        <div class="temp">
            <el-row :gutter="10">
                <el-col :span="5">
                </el-col>
                <el-col :span="14">
                    <div class="form-container">
                        <h1>客服聊天界面设置</h1>
                        <div class="form-box">
                            <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="120px"
                                     class="demo-ruleForm">
                                <el-form-item prop="title" label="网站标题">
                                    <el-input placeholder="网站标题" v-model="ruleForm.title">
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="domain" label="网站域名">
                                    <el-input placeholder="网站域名" v-model="ruleForm.domain">
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="color" label="主题色">
                                    <el-color-picker v-model="ruleForm.color"/>
                                </el-form-item>
                                <el-form-item prop="phone" label="联系电话">
                                    <el-input placeholder="联系电话" v-model="ruleForm.phone">
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="logo" label="头像url">
                                    <el-input placeholder="头像url" v-model="ruleForm.logo">
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="photo" label="简介图片url">
                                    <el-input placeholder="简介图片url" v-model="ruleForm.photo">
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="introduce" label="简介">
                                    <el-input placeholder="简介" rows="5" type="textarea" v-model="ruleForm.introduce">
                                    </el-input>
                                </el-form-item>
                                <el-form-item class="login-btn-box">
                                    <el-button type="primary" :loading="commonData.btnLoading" @click="handleSave">
                                        保存
                                    </el-button>
                                    <el-button type="primary" :loading="commonData.createLoading"
                                               @click="createJavascript">
                                        生成脚本
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </el-col>
                <el-col :span="5">
                </el-col>
            </el-row>
        </div>
        <el-dialog class="dialog-box" v-model="dialogTableVisible" title="脚本">
            <div class="box" v-html="javascript"></div>
            <div class="tip">将脚本复制到网页head标签内</div>
        </el-dialog>
    </div>
</template>

<script setup>
    import {reactive, ref, onMounted} from 'vue';
    import {ElMessage} from 'element-plus';
    import {api, serviceUrl} from '../utils/api';
    import {service} from '../utils/service';

    const ruleFormRef = ref();
    let token = ref('');
    let javascript = ref('');
    let dialogTableVisible = ref(false);

    const ruleForm = reactive({
        title: '',
        domain: '',
        color: '',
        phone: '',
        logo: '',
        photo: '',
        introduce: ''
    });
    const rules = reactive({
        title: [
            {required: true, message: '请输入网站标题', trigger: 'blur'}
        ],
        domain: [
            {required: true, message: '请输入域名', trigger: 'blur'}
        ],
        color: [
            {required: true, message: '请选择主题色', trigger: 'blur'}
        ],
        phone: [
            {required: true, message: '请输入联系方式', trigger: 'blur'}
        ],
        logo: [
            {required: true, message: '请输入logo url', trigger: 'blur'}
        ],
        photo: [
            {required: true, message: '请输入简介图url', trigger: 'blur'}
        ],
        introduce: [
            {required: true, message: '请输入简介', trigger: 'blur'}
        ]
    });
    const commonData = reactive({
        btnLoading: false,
        createLoading: false
    });
    onMounted(async () => {
        await getSiteInfo();
    });
    //处理保存功能
    const handleSave = () => {
        ruleFormRef.value.validate((valid) => {
            if (valid) {
                commonData.btnLoading = true;
                service.doPost(api['site'], ruleForm)
                    .then(async (response) => {
                        if (response.code === 1) {
                            ElMessage({
                                showClose: false,
                                message: '保存成功',
                                type: 'success',
                            });
                        }
                        commonData.btnLoading = false;
                    }).catch(() => {
                    commonData.btnLoading = false;
                })
            }
        })
    };
    //获取网站设置
    const getSiteInfo = () => {
        service.doGet(api['site'])
            .then(async (response) => {
                if (response.code === 1) {
                    const siteInfo = response.data.siteInfo;
                    if (siteInfo['token']) {
                        token.value = siteInfo['token'];
                    }
                    for (let key in ruleForm) {
                        ruleForm[key] = siteInfo[key] || '';
                    }
                }
            }).catch((err) => {
            console.log(err);
        })
    };
    //生成脚本
    const createJavascript = async () => {
        javascript.value = `&lt;script&gt;
            <div>(function () {</div>
            <div>var hm = document.createElement("script");</div>
            <div>hm.src = "${serviceUrl}/users/site.js?${token.value}";</div>
            <div>var s = document.getElementsByTagName("script")[0];</div>
            <div>s.parentNode.insertBefore(hm, s);</div>
        <div>})()</div>
        &lt;/script&gt;`;
        dialogTableVisible.value = true;
    }
</script>

<style lang="less" scoped>

    .login-container {
        display: flex;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

        .dialog-box {
            text-align: left !important;

            .box {
                background: #eee;
                padding: 15px;
                border: 1px solid #ddd;
                margin: 0 auto;
                line-height: 30px;
                text-align: left;
            }

            .tip {
                text-align: left;
                font-size: 12px;
                color: #999;
                margin-top: 15px;
            }
        }

        .temp {
            flex: 1;
        }

        .form-container {
            background: #fff;
            padding: 15px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;

            input {
                font-size: 12px !important;
            }

            .logo {
                width: 50px;
            }

            h1 {
                font-size: 20px;
                margin: 0 auto;
            }

            .form-box {
                margin: 30px auto;

                .tip {
                    color: #C0C4CC;
                    font-size: 12px;
                }
            }
        }
    }
</style>
<style>
    .el-dialog__header {
        text-align: left !important;
    }
</style>